import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import moment from 'moment';
import { SecondHeaderC, TableC } from '../../../comps';
import myStyle from './index.less';
import { fixedNum } from '../../../utils/utils';

@connect(({ investmentCalendarM, loading }) => ({
  investmentCalendarM,
  loading,
}))
@Form.create()
export default class ProductC extends PureComponent {
  state = {
    date: '', //当前日期
    portfolioCodeList: undefined, //组合list
    netting: undefined, //总轧差
    columns: undefined,
    dataSource: undefined,
    currentTime: '', //当前时间戳
  };

  componentDidMount() {}

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (
      this.state.currentTime != nextProps.currentTime ||
      this.state.date != nextProps.date ||
      JSON.stringify(nextProps.portfolioCodeList) !== JSON.stringify(this.state.portfolioCodeList)
    ) {
      this.setState(
        {
          portfolioCodeList: nextProps.portfolioCodeList,
          date: nextProps.date,
          currentTime: nextProps.currentTime,
        },
        () => {
          this.queryProductEvents(); //查询产品事件
        },
      );
    }
  }

  //查询产品事件
  queryProductEvents = () => {
    this.setState({
      netting: undefined,
      columns: undefined,
      dataSource: undefined,
    }); //查询之前清除数据
    const { portfolioCodeList, date } = this.state;
    this.props.dispatch({
      type: 'investmentCalendarM/queryProductEvents',
      payload: {
        portfolioCode: portfolioCodeList,
        date: moment(date).format('YYYYMMDD'),
      },
      callback: (type, data) => {
        if (type == 'success') {
          data.table.dataSource.map((item, key) => {
            item.key = key;
          });
          this.setState({
            netting: data.totalNetting,
            columns: data.table.columns || [],
            dataSource: data.table.dataSource || [],
          });
        } else {
          this.setState({
            netting: undefined,
            columns: [],
            dataSource: [],
          });
        }
      },
    });
  };

  render() {
    const { netting, columns, dataSource } = this.state;
    columns &&
      columns.map((item) => {
        if (item.key != 'amount') {
          item.width = parseFloat(100 / columns.length) + '%';
        } else {
          item.type = 'money';
        }
        if (item.key == 'dataDt') {
          item.render = (text) => {
            return text ? moment(text).format('YYYY-MM-DD') : '--';
          };
        }
      });
    return (
      <div>
        <div className={myStyle.eventsTitle}>
          <SecondHeaderC title={'产品事件'} />
          <span style={{ fontWeight: 500 }}>{`总轧差: ${fixedNum(netting, 2)}`}</span>
        </div>
        <TableC columns={columns} dataSource={dataSource} hidePage={true} scroll={dataSource && dataSource.length > 5 ? { x: '100%', y: '174px' } : {}} rowKey='key' />
      </div>
    );
  }
}
